<template>
<div class="bar">
  <div class="readbar">
      <div class="box">
        <div class="box-left">
          <div>
            <img
              src="../assets/icon/addBook.png"
              style="width: 20px; height: 20px"
            />
          </div>
          <span style="font-size: 12px; color: rgb(255, 166, 0)">加入书架</span>
        </div>

        <div class="box-right">
          <div>
            <img
              src="../assets/icon/reading.png"
              style="width: 20px; height: 20px"
            />
          </div>
          <span style="font-size: 12px; color: white;" >开始阅读</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.readbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 5;
 
}
.box {
  height: 70px;
  display: flex;
  justify-content: space-between;
  background: white;
  box-shadow:2px 2px 5px rgb(109, 108, 108);
}
.box-left {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
}
.box-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgb(255, 166, 0);
  justify-content: center;
}
</style>